
<template>
  <div style="width: 1200px;margin: 60px auto">


<!--        展示所有的菜谱-->
<div style="margin: 100px 30px">

  <div class="allRecipe">
    <div>
      <div style="overflow: hidden">
        <h2 style="float:left;margin-top: 40px">菜谱们</h2>
      </div>
    </div>
    <div style="margin-top: 30px;">
      <el-row gutter="40">
        <el-col span="6" v-for="m in recipeArr" >
          <div style="margin-top: 25px">
            <a @click="$router.push('/recipe/details?recipeId='+m.id)">
              <img :src="m.image" alt="" style="border-radius: 10px; width: 220px;">
              <p class="title" style="text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;">{{m.title}}</p>
            </a>
            <p class="author">by {{m.authorNickName}}</p>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>

</div>


  </div>
</template>

<script>

export default {
  data() {
    return {
      $:"",
      recipeArr:[],
    }


  },
  methods: {
    //加载所有的菜谱
    loadAllRecipeList(){
      let url = 'http://localhost:8889/recipe/list/all';
      console.log('url = ' + url);

      let localJwt = localStorage.getItem('loginInfo');
      this.axios
          .create({
            'headers': {
              'Authorization': localJwt
            }
          }).get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.recipeArr = jsonResult.data;
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
  },
  mounted() {

  //加载所有的菜谱
    this.loadAllRecipeList();

  }
}

</script>

<style>
*{margin: 0;
  padding:0}
a:hover{cursor: pointer;
  color: orange;
  text-decoration: none}

.el-menu--horizontal>.el-menu-item,.el-menu--horizontal>.el-submenu .el-submenu__title {
  height: 49px;
  line-height: 70px;
}

.el-menu-item,.el-submenu__title{
  padding: 0 15px;
}
.el-button{
  padding: 8px 12px;
}
.el-input__inner{
  height: 30px;
  line-height: 20px;
}


#index_main{margin: 0 auto}
.el-card__body, .el-main{
  padding:0;}
/*#index_footer{height: 398px;background-color: #e8e8e8}*/

.dailyRecipe  .title{font-size: 15px;line-height: 35px}
.dailyRecipe  .author{font-size: 12px;line-height: 13px}
.othersSearch_topic span{
  display: inline-block;
  border: #333333 1px solid;
  border-radius: 5px;
  padding: 6px 24px;
  font-size: 12px;
  margin: 12px;
}
.othersSearch_topic span:hover{
  color: orange;
  border: orange 1px solid;
}
.el-aside .follow span{
  display: inline-block;
  border: #333333 1px solid;
  border-radius: 5px;
  padding: 6px 16px;
  font-size: 12px;
  margin: 12px;
}
.el-aside .follow span:hover{
  color: orange;
  border: orange 1px solid;
}
.follow_author{
  font-size: 15px;
}
.follow_fans{
  font-size: 12px;
  color: #999999;
  margin-top: 8px;
}
element.style {
  padding: 0;
}
.el-menu.el-menu--horizontal{
  border-bottom: none;
}
.el-main{
  padding: 0 !important;
}
.el-submenu__title{
  padding: 0 5px !important;
}
.el-dropdown-menu__item, .el-menu-item{
  padding: 0 10px !important;
}

.page-scroll .el-scrollbar__wrap {
  overflow-x: hidden;
}
.allRecipe  .title{font-size: 15px;line-height: 35px}
.allRecipe  .author{font-size: 12px;line-height: 13px}
</style>


